<template>
  <div class="home">
    <!-- 轮播 -->
    <div class="block">
      <el-carousel :height='`${imgH}px`'
                   indicator-position='none'
                   :interval=5000>
        <el-carousel-item v-for="benner in benners "
                          :key="benner.id">
          <img :src='`http://www.cdutetc.cn/site/cms_22/upload/image/20200110/${benner.url}`'
               ref="bImg"
               style="width:100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="middle-nav">
      <img src="../../assets/imgs/2bg.png"
           alt=""
           ref="bb"
           style="width: 100%;height: 100%;">
      <div class="m-content">
        <img src="../../assets/imgs/bdbd.jpg"
             alt=""
             class="backImg">
        <ul>
          <li style="width: 44%;">
            <div class="card1"
                 style="height:100%;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;"></div>
            <div class="text"
                 style="position: absolute;width: 175px;bottom: 0;right: 0;border-top-left-radius: 8px;border-bottom-left-radius: 0px">
              <p>庆七一、颂党恩、温初心、悟使命</p>
            </div>
          </li>
          <li>
            <div class="card2"></div>
            <div class="text">
              <p>庆七一、颂党恩、温初心、悟使命</p>
            </div>
          </li>
          <li>
            <div class="card3"></div>
            <div class="text">
              <p>庆七一、颂党恩、温初心、悟使命</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="down-area">
      <img src="../../assets/imgs/xm.jpg"
           style="width: 100%;height:100%;">
      <div class="da-shade"></div>
      <div class="da-back">
        <div class="da-content">
          <div class="con-top">
            <div class="da-img1 img-public">
              <p class="img-title">馆藏</p>
              <div class="img-shade"
                   style="background: rgba(4, 251, 91, 0.28);"></div>
            </div>
            <div class="da-img2 img-public">
              <p class="img-title">活动</p>
              <div class="img-shade"
                   style="background: rgba(0, 125, 255, 0.28);"></div>
            </div>
          </div>
          <div class="con-down">
            <div class="da-img3 ">
              <p>公告</p>
              <p class="content3">根据当前乐山市疫情防控形势，中国核聚变博物馆将尽快开放，敬请期待！</p>
            </div>
            <div class="da-img4 img-public">
              <p class="img-title">历史由来</p>
              <div class="img-shade"
                   style="background: rgba(216, 0, 255, 0.28);"></div>
            </div>
            <div class="da-img5 img-public">
              <p class="img-title">导览</p>
              <div class="img-shade"
                   style="background: rgba(239, 255, 0, 0.28);"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      benners: [
        { id: 1, url: '1578648717738073010.jpg' },
        { id: 2, url: '1578648717738073010.jpg' },
        { id: 3, url: '1578648717738073010.jpg' },
        { id: 4, url: '1578648717738073010.jpg' },
        { id: 5, url: '1578648717738073010.jpg' },
      ],
      imgH: '',
      aa: true,

    }
  },
  created () {
    // axios调用事例
    this.$api.homeApi.getBenners().then(res => {
      console.log(res)
    }).catch(e => { console.log(e) })

  },
  activated () {
    this.imgH = this.$refs.bImg[0].height
    window.addEventListener('resize', () => {
      if (this.$route.path == `${this.$store.state.terminal}/home`) {
        this.imgH = this.$refs.bImg[0].height
      }
    })
  },
  mounted () {
    // 轮播图高度自适应
    this.$refs.bImg[0].onload = () => {
      this.imgH = this.$refs.bImg[0].height
    }
    // 响应式轮播图高度自适应


    // this.judgeIsHome();
    // this.$store.commit('isHome');
  },
  methods: {
    // ...mapMutations(['judgeIsHome'])
  }
}
</script>


<style lang="scss" scoped>
// 中部导航栏
.middle-nav {
  width: 100%;
  height: 696px;
  margin-top: -147px;
  position: relative;
  img {
    position: relative;
    z-index: 2;
  }
  .m-content {
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 3;
    top: 0;
    .backImg {
      width: 80%;
      height: 100%;
      margin: auto;
      display: block;
      box-shadow: 10px 10px 41px -5px #4b4d4e;
    }
    ul {
      width: 76%;
      margin: 0;
      height: 100%;
      padding: 0;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      z-index: 4;
      li {
        width: 26%;
        height: 80%;
        list-style: none;
        position: relative;
        .card1 {
          width: 100%;
          height: 82%;
          background: url("../../assets/imgs/m1.jpg") no-repeat;
          background-size: cover;
        }
        .card2 {
          width: 100%;
          height: 82%;
          background: url("../../assets/imgs/m1.jpg") no-repeat;
          background-size: cover;
        }
        .card3 {
          width: 100%;
          height: 82%;
          background: url("../../assets/imgs/m1.jpg") no-repeat;
          background-size: cover;
        }
        .text {
          width: 100%;
          height: 18%;
          background: #fdfdff;
          text-align: center;
          line-height: 39px;
          box-sizing: border-box;
          padding: 8px 0px 8px 8px;
          border-bottom-right-radius: 8px;
          border-bottom-left-radius: 8px;
          p {
            margin: 0;
            font-size: 1rem;
            color: rgb(61, 85, 130);
            height: 100%;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}

// 下面的图片拼接模块
.down-area {
  width: 100%;
  height: 658px;
  margin-top: -164px;
  position: relative;
  .da-shade {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #14191f78;
    z-index: 1;
    top: 0px;
  }
  .da-back {
    width: 100%;
    height: 659px;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: -67px;
    z-index: 3;
    .da-content {
      width: 968px;
      height: 100%;
      .con-top {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-between;
      }
      .con-down {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-between;
      }
      .img-public {
        height: 88%;
        background-size: 100% 100% !important;
        position: relative;
        transition: 0.5s;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          height: 91%;
          background-size: 110% 107% !important;
        }
        &:hover .img-shade {
          opacity: 0;
        }
        .img-title {
          position: absolute;
          bottom: 2px;
          z-index: 1;
          font-size: 1.2rem;
          color: rgb(255, 255, 255);
          margin: 19px 27px;
        }
        .img-shade {
          width: 100%;
          height: 100%;
          background: rgba(29, 160, 167, 0.443);
          transition: 0.5s;
        }
      }
      .da-img1 {
        width: 38%;
        background: url("../../assets/imgs/d1.jpg") no-repeat;
        margin-right: 4%;
      }
      .da-img2 {
        width: 58%;
        background: url("../../assets/imgs/d2.jpg") no-repeat;
      }
      .da-img3 {
        width: 16%;
        height: 88%;
        margin-right: 4%;
        background: rgb(186, 25, 40);
        text-align: center;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        &:nth-child(1) {
          font-size: 1.3rem;
        }
        .content3 {
          width: 100%;
          height: 66%;
          overflow-wrap: break-word;
          padding: 0px 10px;
          box-sizing: border-box;
          line-height: 25px;
          font-size: 1rem;
        }
      }
      .da-img4 {
        width: 38%;
        margin-right: 4%;
        background: url("../../assets/imgs/d3.jpg") no-repeat;
      }
      .da-img5 {
        width: 38%;
        background: url("../../assets/imgs/d4.jpg") no-repeat;
      }
    }
  }
}
</style>

<style lang="scss">
.block {
  .el-carousel {
    .el-carousel__indicators {
      bottom: 180px !important;
      left: 129px !important;
    }
    .el-carousel__arrow {
      background: rgba(125, 124, 124, 0.78);
      height: 50px;
      width: 50px;
      &:hover {
        background: rgba(97, 97, 98, 0.839);
      }
    }
  }
}
</style>